component.online-shop

filter-bar

<!-- Filters -->
<div class="filter-bar">
	<form class="form-inline">
		
		<!-- From -->
		<div class="form-group col-md-2 padding-none">
			<label>From:</label>
			<div class="input-group">
				<input type="text" name="from" id="dateRangeFrom" class="form-control" value="08/05/13" />
				<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
			</div>
		</div>
		<!-- // From END -->
		
		<!-- To -->
		<div class="form-group col-md-2 padding-none">
			<label>To:</label>
			<div class="input-group">
				<input type="text" name="to" id="dateRangeTo" class="form-control" value="08/18/13" />
				<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
			</div>
		</div>
		<!-- // To END -->
		
		<!-- Min -->
		<div class="form-group col-md-2 padding-none">
			<label>Min:</label>
			<div class="input-group">
				<input type="text" name="from" class="form-control" value="100" />
				<span class="input-group-addon"><i class="fa fa-euro"></i></span>
			</div>
		</div>
		<!-- // Min END -->
		
		<!-- Max -->
		<div class="form-group col-md-2 padding-none">
			<label>Max:</label>
			<div class="input-group">
				<input type="text" name="from" class="form-control" value="500" />
				<span class="input-group-addon"><i class="fa fa-euro"></i></span>
			</div>
		</div>
		<!-- // Max END -->
		
		<!-- Select -->
		<div class="form-group col-md-3 padding-none">
			<label class="label-control">Select:</label>
			<div class="col-md-8 padding-none">
				<select name="from" class="form-control">
					<option>Some option</option>
					<option>Other option</option>
					<option>Some other option</option>
				</select>
			</div>
		</div>
		<!-- // Select END -->
		
		<div class="clearfix"></div>
	</form>
</div>
<!-- // Filters END -->


Code

@import "assets/components/modules/admin/online-shop/assets/less/filter-bar.less";
@import "http://localhost/shared/components/library/jquery-ui/css/jquery-ui.min.css";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

HEAD You should include the following scripts in the head section of the document, right before the closing </head> tag, after styles.

<script src="assets/components/library/jquery-ui/js/jquery-ui.min.js?v=v1.2.3"></script>
<script src="assets/components/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js?v=v1.2.3"></script>

product-add

Product title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Photos
Custom attributes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus leo tortor, sit amet sodales mauris iaculis ac. Fusce eu euismod orci. Nam congue magna at urna varius, nec viverra risus facilisis. In eu ullamcorper enim. Suspendisse sagittis dolor quis est porttitor fringilla. Suspendisse venenatis, diam vitae tempor lacinia, metus risus tincidunt massa, a malesuada augue massa eu augue. Praesent convallis et metus vulputate euismod. Aenean ultricies dolor porta turpis bibendum, non pretium metus placerat. Donec congue tincidunt pharetra. Aliquam sed orci lectus. Mauris iaculis leo turpis. Duis auctor libero mi, non convallis lectus pellentesque in. Donec rutrum neque bibendum nulla vulputate condimentum. Sed dictum ut velit nec feugiat. Nullam aliquam enim at commodo lobortis.

Quantity & Price

Donec sit amet lacus enim. Mauris vehicula vulputate erat, eget sagittis ipsum hendrerit id. Maecenas tristique sodales tellus vel euismod. Ut odio dolor, convallis vel auctor non, congue quis augue. Cras a tincidunt mauris. Mauris iaculis ullamcorper sapien, id vestibulum lectus dictum quis. Quisque et nunc sit amet eros tristique pellentesque ac sed purus. Fusce vel nunc varius, vestibulum ligula venenatis, facilisis ante.

Search Engine Optimization

Aenean sollicitudin et nisi ac faucibus. Ut lacinia rhoncus posuere. Cras consectetur tincidunt consectetur. Nam egestas augue sed leo tincidunt imperdiet. Etiam eu convallis magna, sed hendrerit sem. Sed vulputate, tortor vel ullamcorper aliquet, ante nibh iaculis neque, ullamcorper dictum felis metus nec quam. Pellentesque sollicitudin turpis a mi volutpat, eget sagittis urna vehicula. Nunc vel ultrices elit. Proin eros justo, hendrerit a metus non, convallis ullamcorper magna.

<!-- Widget -->
<div class="widget widget-tabs widget-tabs-gray">

	<!-- Widget heading -->
	<div class="widget-head">
		<ul>
			<li class="active"><a href="#productDescriptionTab" data-toggle="tab" class="glyphicons font"><i></i>Description</a></li>
			<li><a href="#productPhotosTab" data-toggle="tab" class="glyphicons picture"><i></i>Photos</a></li>
			<li><a href="#productAttributesTab" data-toggle="tab" class="glyphicons adjust_alt"><i></i>Custom Attributes</a></li>
			<li><a href="#productPriceTab" data-toggle="tab" class="glyphicons table"><i></i>Qty & Price</a></li>
			<li><a href="#productSeoTab" data-toggle="tab" class="glyphicons podium"><i></i>SEO</a></li>
		</ul>
	</div>
	<!-- // Widget heading END -->
	
	<div class="widget-body">
		<div class="tab-content">
		
			<!-- Description -->
			<div class="tab-pane active" id="productDescriptionTab">
			
				<!-- Row -->
				<div class="row">
				
					<!-- Column -->
					<div class="col-md-3">
						<strong>Product title</strong>
						<p class="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
					<!-- // Column END -->
					
					<!-- Column -->
					<div class="col-md-9">
						<label for="inputTitle">Title</label>
						<input type="text" id="inputTitle" class="form-control" value="" placeholder="Enter product title ..." />
						<div class="separator"></div>
					</div>
					<!-- // Column END -->
					
				</div>
				<!-- // Row END -->
				
				<hr class="separator bottom" />
				
				<!-- Row -->
				<div class="row">
				
					<!-- Column -->
					<div class="col-md-3">
						<strong>Description</strong>
						<p class="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
					<!-- // Column END -->
					
					<!-- Column -->
					<div class="col-md-9">
						<label for="textDescription">Description</label>
						<textarea id="textDescription" class="wysihtml5 form-control" rows="5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</textarea>
					</div>
					<!-- // Column END -->
					
				</div>
				<!-- // Row END -->
				
			</div>
			<!-- // Description END -->
			
			<!-- Photos -->
			<div class="tab-pane" id="productPhotosTab">
			
				<h5 class="strong text-uppercase margin-none">Photos</h5>
				<div class="separator bottom"></div>
				
				<!-- Gallery Layout -->
				<div class="gallery gallery-2">
					<ul class="row" data-toggle="modal-gallery" data-target="#modal-gallery" id="gallery-4" data-delegate="#gallery-4">
												<li class="col-md-2 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/8.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/8.jpg" class="img-responsive" alt="photo" /></a></li>
												<li class="col-md-2 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/7.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/7.jpg" class="img-responsive" alt="photo" /></a></li>
												<li class="col-md-2 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/6.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/6.jpg" class="img-responsive" alt="photo" /></a></li>
												<li class="col-md-2 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/5.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/5.jpg" class="img-responsive" alt="photo" /></a></li>
												<li class="col-md-2 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/4.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/4.jpg" class="img-responsive" alt="photo" /></a></li>
												<li class="col-md-2"><a class="thumb" href="../assets/images/gallery-2/3.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/3.jpg" class="img-responsive" alt="photo" /></a></li>
												<li class="col-md-2"><a class="thumb" href="../assets/images/gallery-2/2.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/2.jpg" class="img-responsive" alt="photo" /></a></li>
												<li class="col-md-2"><a class="thumb" href="../assets/images/gallery-2/1.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/1.jpg" class="img-responsive" alt="photo" /></a></li>
											</ul>
				</div>
				<!-- // Gallery Layout END -->
			
			</div>
			<!-- // Photos END -->
			
			<!-- Attributes -->
			<div class="tab-pane" id="productAttributesTab">
				<h5 class="strong text-uppercase">Custom attributes</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus leo tortor, sit amet sodales mauris iaculis ac. Fusce eu euismod orci. Nam congue magna at urna varius, nec viverra risus facilisis. In eu ullamcorper enim. Suspendisse sagittis dolor quis est porttitor fringilla. Suspendisse venenatis, diam vitae tempor lacinia, metus risus tincidunt massa, a malesuada augue massa eu augue. Praesent convallis et metus vulputate euismod. Aenean ultricies dolor porta turpis bibendum, non pretium metus placerat. Donec congue tincidunt pharetra. Aliquam sed orci lectus. Mauris iaculis leo turpis. Duis auctor libero mi, non convallis lectus pellentesque in. Donec rutrum neque bibendum nulla vulputate condimentum. Sed dictum ut velit nec feugiat. Nullam aliquam enim at commodo lobortis.</p>
			</div>
			<!-- // Attributes END -->
			
			<!-- Price -->
			<div class="tab-pane" id="productPriceTab">
				<h5 class="strong text-uppercase">Quantity &amp; Price</h5>
				<p>Donec sit amet lacus enim. Mauris vehicula vulputate erat, eget sagittis ipsum hendrerit id. Maecenas tristique sodales tellus vel euismod. Ut odio dolor, convallis vel auctor non, congue quis augue. Cras a tincidunt mauris. Mauris iaculis ullamcorper sapien, id vestibulum lectus dictum quis. Quisque et nunc sit amet eros tristique pellentesque ac sed purus. Fusce vel nunc varius, vestibulum ligula venenatis, facilisis ante.</p>
			</div>
			<!-- // Price END -->
			
			<!-- SEO -->
			<div class="tab-pane" id="productSeoTab">
				<h5 class="strong text-uppercase">Search Engine Optimization</h5>
				<p>Aenean sollicitudin et nisi ac faucibus. Ut lacinia rhoncus posuere. Cras consectetur tincidunt consectetur. Nam egestas augue sed leo tincidunt imperdiet. Etiam eu convallis magna, sed hendrerit sem. Sed vulputate, tortor vel ullamcorper aliquet, ante nibh iaculis neque, ullamcorper dictum felis metus nec quam. Pellentesque sollicitudin turpis a mi volutpat, eget sagittis urna vehicula. Nunc vel ultrices elit. Proin eros justo, hendrerit a metus non, convallis ullamcorper magna.</p>
			</div>
			<!-- // SEO END -->
			
		</div>
	</div>
</div>
<!-- // Widget END -->

<!-- Bottom buttons -->
<div class="heading-buttons">
	<div class="buttons pull-right" style="margin: 0;">
		<a href="" class="btn btn-default"><i class="fa fa-share fa-fw"></i> Preview</a>
		<a href="" class="btn btn-primary"><i class="fa fa-check fa-fw"></i> Save</a>
	</div>
	<div class="clearfix"></div>
</div>
<!-- // Bottom buttons END -->




Code

@import "http://localhost/shared/components/modules/admin/forms/editors/wysihtml5/assets/lib/css/bootstrap-wysihtml5-0.0.2.css";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/core/less/forms.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/forms/editors/wysihtml5/assets/lib/js/wysihtml5-0.3.0_rc2.min.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/forms/editors/wysihtml5/assets/lib/js/bootstrap-wysihtml5-0.0.2.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/forms/editors/wysihtml5/assets/custom/wysihtml5.init.js?v=v1.2.3"></script>

product-list

Total products: 26
No. Title Drag Preview Stock Price Actions
1 Lorem Dolor Ipsum 1 photos €34
2 Lorem Amet Dolor 1 photos €17
3 Lorem Dolor Ipsum 3 photos €44
4 Lorem Ipsum Sit 2 photos €29
5 Lorem Ipsum Sit 1 photos €14
6 Lorem Dolor Ipsum 2 photos €44
7 Lorem Amet Dolor 3 photos €40
8 Lorem Amet Dolor 1 photos €15
9 Lorem Ipsum Sit 1 photos €23
10 Lorem Dolor Ipsum 2 photos €19
<!-- Total products & Sort by options -->
<div class="form-inline separator bottom small">
	Total products: 26
	<span class="pull-right">
		<label class="strong">Sort by:</label>
		<select class="selectpicker" data-style="btn-default btn-xs">
			<option>Option</option>
			<option>Option</option>
			<option>Option</option>
		</select>
	</span>
</div>
<!-- // Total products & Sort by options END -->



<!-- Products table -->
<table class="table table-bordered table-condensed table-striped table-primary table-vertical-center checkboxs js-table-sortable">
	<thead>
		<tr>
			<th style="width: 1%;" class="uniformjs"><input type="checkbox" /></th>
			<th style="width: 1%;" class="center">No.</th>
			<th>Title</th>
			<th style="width: 1%;" class="center">Drag</th>
			<th class="center">Preview</th>
			<th class="center">Stock</th>
			<th class="center">Price</th>
			<th class="center" style="width: 100px;">Actions</th>
		</tr>
	</thead>
	<tbody>
						<tr class="selectable">
			<td class="center uniformjs"><input type="checkbox" /></td>
			<td class="center">1</td>
			<td class="important">Lorem Dolor Ipsum</td>
			<td class="center js-sortable-handle"><span class="fa fa-arrows move"></span></td>
			<td class="center"><span class="fa fa-picture-o fa-fw"></span> 1 photos</td>
			<td class="text-center">
				<input type="text" class="form-control" style="width: 50px; margin: 0 auto;" value="9" />
			</td>
			<td class="center">&euro;34</td>
			<td class="center">
				<div class="btn-group btn-group-sm">
					<a href="product_edit.html?lang=en" class="btn btn-success"><i class="fa fa-pencil"></i></a>
					<a href="#" class="btn btn-danger"><i class="fa fa-times"></i></a>
				</div>
			</td>
		</tr>
				<tr class="selectable selected">
			<td class="center uniformjs"><input type="checkbox" checked="checked" /></td>
			<td class="center">2</td>
			<td class="important">Lorem Amet Dolor</td>
			<td class="center js-sortable-handle"><span class="fa fa-arrows move"></span></td>
			<td class="center"><span class="fa fa-picture-o fa-fw"></span> 1 photos</td>
			<td class="text-center">
				<input type="text" class="form-control" style="width: 50px; margin: 0 auto;" value="8" />
			</td>
			<td class="center">&euro;17</td>
			<td class="center">
				<div class="btn-group btn-group-sm">
					<a href="product_edit.html?lang=en" class="btn btn-success"><i class="fa fa-pencil"></i></a>
					<a href="#" class="btn btn-danger"><i class="fa fa-times"></i></a>
				</div>
			</td>
		</tr>
				<tr class="selectable selected">
			<td class="center uniformjs"><input type="checkbox" checked="checked" /></td>
			<td class="center">3</td>
			<td class="important">Lorem Dolor Ipsum</td>
			<td class="center js-sortable-handle"><span class="fa fa-arrows move"></span></td>
			<td class="center"><span class="fa fa-picture-o fa-fw"></span> 3 photos</td>
			<td class="text-center">
				<input type="text" class="form-control" style="width: 50px; margin: 0 auto;" value="1" />
			</td>
			<td class="center">&euro;44</td>
			<td class="center">
				<div class="btn-group btn-group-sm">
					<a href="product_edit.html?lang=en" class="btn btn-success"><i class="fa fa-pencil"></i></a>
					<a href="#" class="btn btn-danger"><i class="fa fa-times"></i></a>
				</div>
			</td>
		</tr>
				<tr class="selectable">
			<td class="center uniformjs"><input type="checkbox" /></td>
			<td class="center">4</td>
			<td class="important">Lorem Ipsum Sit</td>
			<td class="center js-sortable-handle"><span class="fa fa-arrows move"></span></td>
			<td class="center"><span class="fa fa-picture-o fa-fw"></span> 2 photos</td>
			<td class="text-center">
				<input type="text" class="form-control" style="width: 50px; margin: 0 auto;" value="9" />
			</td>
			<td class="center">&euro;29</td>
			<td class="center">
				<div class="btn-group btn-group-sm">
					<a href="product_edit.html?lang=en" class="btn btn-success"><i class="fa fa-pencil"></i></a>
					<a href="#" class="btn btn-danger"><i class="fa fa-times"></i></a>
				</div>
			</td>
		</tr>
				<tr class="selectable">
			<td class="center uniformjs"><input type="checkbox" /></td>
			<td class="center">5</td>
			<td class="important">Lorem Ipsum Sit</td>
			<td class="center js-sortable-handle"><span class="fa fa-arrows move"></span></td>
			<td class="center"><span class="fa fa-picture-o fa-fw"></span> 1 photos</td>
			<td class="text-center">
				<input type="text" class="form-control" style="width: 50px; margin: 0 auto;" value="1" />
			</td>
			<td class="center">&euro;14</td>
			<td class="center">
				<div class="btn-group btn-group-sm">
					<a href="product_edit.html?lang=en" class="btn btn-success"><i class="fa fa-pencil"></i></a>
					<a href="#" class="btn btn-danger"><i class="fa fa-times"></i></a>
				</div>
			</td>
		</tr>
				<tr class="selectable">
			<td class="center uniformjs"><input type="checkbox" /></td>
			<td class="center">6</td>
			<td class="important">Lorem Dolor Ipsum</td>
			<td class="center js-sortable-handle"><span class="fa fa-arrows move"></span></td>
			<td class="center"><span class="fa fa-picture-o fa-fw"></span> 2 photos</td>
			<td class="text-center">
				<input type="text" class="form-control" style="width: 50px; margin: 0 auto;" value="8" />
			</td>
			<td class="center">&euro;44</td>
			<td class="center">
				<div class="btn-group btn-group-sm">
					<a href="product_edit.html?lang=en" class="btn btn-success"><i class="fa fa-pencil"></i></a>
					<a href="#" class="btn btn-danger"><i class="fa fa-times"></i></a>
				</div>
			</td>
		</tr>
				<tr class="selectable">
			<td class="center uniformjs"><input type="checkbox" /></td>
			<td class="center">7</td>
			<td class="important">Lorem Amet Dolor</td>
			<td class="center js-sortable-handle"><span class="fa fa-arrows move"></span></td>
			<td class="center"><span class="fa fa-picture-o fa-fw"></span> 3 photos</td>
			<td class="text-center">
				<input type="text" class="form-control" style="width: 50px; margin: 0 auto;" value="4" />
			</td>
			<td class="center">&euro;40</td>
			<td class="center">
				<div class="btn-group btn-group-sm">
					<a href="product_edit.html?lang=en" class="btn btn-success"><i class="fa fa-pencil"></i></a>
					<a href="#" class="btn btn-danger"><i class="fa fa-times"></i></a>
				</div>
			</td>
		</tr>
				<tr class="selectable">
			<td class="center uniformjs"><input type="checkbox" /></td>
			<td class="center">8</td>
			<td class="important">Lorem Amet Dolor</td>
			<td class="center js-sortable-handle"><span class="fa fa-arrows move"></span></td>
			<td class="center"><span class="fa fa-picture-o fa-fw"></span> 1 photos</td>
			<td class="text-center">
				<input type="text" class="form-control" style="width: 50px; margin: 0 auto;" value="4" />
			</td>
			<td class="center">&euro;15</td>
			<td class="center">
				<div class="btn-group btn-group-sm">
					<a href="product_edit.html?lang=en" class="btn btn-success"><i class="fa fa-pencil"></i></a>
					<a href="#" class="btn btn-danger"><i class="fa fa-times"></i></a>
				</div>
			</td>
		</tr>
				<tr class="selectable">
			<td class="center uniformjs"><input type="checkbox" /></td>
			<td class="center">9</td>
			<td class="important">Lorem Ipsum Sit</td>
			<td class="center js-sortable-handle"><span class="fa fa-arrows move"></span></td>
			<td class="center"><span class="fa fa-picture-o fa-fw"></span> 1 photos</td>
			<td class="text-center">
				<input type="text" class="form-control" style="width: 50px; margin: 0 auto;" value="8" />
			</td>
			<td class="center">&euro;23</td>
			<td class="center">
				<div class="btn-group btn-group-sm">
					<a href="product_edit.html?lang=en" class="btn btn-success"><i class="fa fa-pencil"></i></a>
					<a href="#" class="btn btn-danger"><i class="fa fa-times"></i></a>
				</div>
			</td>
		</tr>
				<tr class="selectable">
			<td class="center uniformjs"><input type="checkbox" /></td>
			<td class="center">10</td>
			<td class="important">Lorem Dolor Ipsum</td>
			<td class="center js-sortable-handle"><span class="fa fa-arrows move"></span></td>
			<td class="center"><span class="fa fa-picture-o fa-fw"></span> 2 photos</td>
			<td class="text-center">
				<input type="text" class="form-control" style="width: 50px; margin: 0 auto;" value="1" />
			</td>
			<td class="center">&euro;19</td>
			<td class="center">
				<div class="btn-group btn-group-sm">
					<a href="product_edit.html?lang=en" class="btn btn-success"><i class="fa fa-pencil"></i></a>
					<a href="#" class="btn btn-danger"><i class="fa fa-times"></i></a>
				</div>
			</td>
		</tr>
			</tbody>
</table>
<!-- // Products table END -->

<!-- Options -->
<div class="">

	<!-- With selected actions -->
	<div class="pull-left checkboxs_actions" style="display: none;">
		<label>With selected:
		<select class="selectpicker margin-none dropup" data-style="btn-default btn-xs">
			<option>Action</option>
			<option>Action</option>
			<option>Action</option>
		</select>
		</label>
	</div>
	<!-- // With selected actions END -->
	
	<div class="pull-right"><ul class="pagination margin-none">
	<li class="disabled"><a href="#">&laquo;</a></li>
	<li class="active"><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">&raquo;</a></li>
</ul>
</div>

	<div class="clearfix"></div>
	<!-- // Pagination END -->
	
</div>
<!-- // Options END -->



Code

@import "assets/components/modules/admin/ui/pagination/pagination-bootstrap/assets/pagination.less";
@import "http://localhost/shared/components/modules/admin/forms/elements/bootstrap-select/assets/lib/css/bootstrap-select.css";
@import "http://localhost/shared/components/modules/admin/forms/elements/bootstrap-select/assets/custom/less/bootstrap-select.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "http://localhost/shared/components/modules/admin/forms/elements/uniform/assets/lib/css/uniform.default.css";
@import "http://localhost/shared/components/modules/admin/forms/elements/uniform/assets/custom/less/uniformjs.less";
@import "assets/components/modules/admin/tables/classic/assets/less/tables.less";
@import "http://localhost/shared/components/library/jquery-ui/css/jquery-ui.min.css";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

HEAD You should include the following scripts in the head section of the document, right before the closing </head> tag, after styles.

<script src="assets/components/library/jquery-ui/js/jquery-ui.min.js?v=v1.2.3"></script>
<script src="assets/components/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js?v=v1.2.3"></script>

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/forms/elements/bootstrap-select/assets/lib/js/bootstrap-select.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/forms/elements/bootstrap-select/assets/custom/js/bootstrap-select.init.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/forms/elements/uniform/assets/lib/js/jquery.uniform.min.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/forms/elements/uniform/assets/custom/js/uniform.init.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/tables/classic/assets/js/tables-classic.init.js?v=v1.2.3"></script>

shop-alerts

Last order

view all
  • 40x40

    10 items

    €5,900

Best seller

view all
  • 40x40

    Product name

    €2,900

Promotion

view all
  • 40x40

    Product name

    €1,800

<div class="row">
	<!-- Row -->
	
		<!-- Column -->
		<div class="col-md-4">
		
			<!-- Widget -->
			<div class="widget widget-inverse">
				
				<!-- Widget heading -->
				<div class="widget-head">
					<h4 class="heading">Last order</h4>
					<a href="" class="details pull-right">view all</a>
				</div>
				<!-- // Widget heading END -->
				
				<div class="widget-body innerAll half">
					<ul class="unstyled">
						<li>
							<div class="media">
								<a class="pull-left thumb"><img data-src="holder.js/40x40/dark" class="media-object img-responsive" alt="40x40"></a>
								<div class="media-body">
									<p class="margin-none text-uppercase">10 items</p>
									<p><strong>&euro;5,900</strong></p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- // Widget END -->
			
		</div>
		<!-- // Column END -->
		
		<!-- Column -->
		<div class="col-md-4">
		
			<!-- Widget -->
			<div class="widget widget-inverse">
			
				<!-- Widget heading -->
				<div class="widget-head">
					<h4 class="heading">Best seller</h4>
					<a href="" class="details pull-right">view all</a>
				</div>
				<!-- // Widget heading END -->
				
				<div class="widget-body innerAll half">
					<ul class="unstyled">
						<li>
							<div class="media">
								<a class="pull-left thumb"><img data-src="holder.js/40x40/dark" class="media-object img-responsive" alt="40x40"></a>
								<div class="media-body">
									<p class="margin-none">Product name</p>
									<p><strong>&euro;2,900</strong></p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- // Widget END -->
			
		</div>
		<!-- // Column END -->
		
		<!-- Column -->
		<div class="col-md-4">
		
			<!-- Widget -->
			<div class="widget widget-inverse">
			
				<!-- Widget heading -->
				<div class="widget-head">
					<h4 class="heading">Promotion</h4>
					<a href="" class="details pull-right">view all</a>
				</div>
				<!-- // Widget heading END -->
				
				<div class="widget-body innerAll half">
					<ul class="unstyled">
						<li>
							<div class="media">
								<a class="pull-left thumb"><img data-src="holder.js/40x40/dark" class="media-object img-responsive" alt="40x40"></a>
								<div class="media-body">
									<p class="margin-none">Product name</p>
									<p><strong>&euro;1,800</strong></p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- // Widget END -->
			
		</div>
		<!-- // Column END -->
		
	
	<!-- // Row END -->
</div>



Code

@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/plugins/holder/holder.js?v=v1.2.3"></script>